<template>
  <div v-show="isShow" class="number-panel">
    <div class="key-board">
      <div
        v-for="num in numbers"
        :key="num"
        class="board-item"
        :class="{
          'number-item': num != '×',
          'del-icon': num == '×',
          'number-back': num == '返回',
        }"
        @click="numberClick(num)"
      >
        {{ num }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NumberPanel',
  data () {
    return {
      isShow: false,
      scrollDistance: 0,
      numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, '返回', 0, '×']
    }
  },
  methods: {
    show (inputEvent, callback) {
      const scrollDistance =
        230 + 30 - (document.documentElement.clientHeight - inputEvent.clientY)
      if (scrollDistance > 0) {
        this.scrollDistance = scrollDistance
      } else {
        this.scrollDistance = 0
      }

      
      this.$attrs['parent-page'][this.$attrs['parent-ref']].style.paddingBottom = '230px'
      window.scrollBy(0, this.scrollDistance)
      this.callback = callback
      this.isShow = true
    },
    hide () {
      window.scrollBy(0, 0 - this.scrollDistance)
      this.$attrs['parent-page'][this.$attrs['parent-ref']].style.paddingBottom = ''
      this.isShow = false
    },
    numberClick (num) {
      if (num === '×') {
        this.callback(-1)
      } else if (num === '返回') {
        this.hide()
      } else {
        this.callback(num)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.number-panel {
  position: fixed;
  width: 100%;
  height: 220px;
  bottom: 0;
  padding: 3px;
  background: rgba(203, 208, 215, 1);
  z-index: 100;

  .key-board {
    .board-item {
      width: calc(33.33% - 6px);
      float: left;
      text-align: center;
      height: 45px;
      line-height: 45px;
      color: #000;
      margin: 3px;
    }

    .number-item {
      background: #fcfcfe;
      box-shadow: 0 1px 0 0 #898a8d;
      border-radius: 5px;
      font-size: 25px;
    }

    .number-back {
      font-size: 20px;
    }

    .del-icon {
      width: 23px;
      height: 20px;
      margin-top: 16px;
      border-right: 1px solid #000;
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;
      margin-left: 50px;
      line-height: 18px;
      font-size: 22px;
      border-radius: 5px;
      position: relative;
    }

    .del-icon::before {
      content: " ";
      width: 12px;
      height: 12px;
      display: block;
      position: absolute;
      left: -5px;
      transform: rotate(45deg);
      border-bottom: 1px solid #000;
      border-left: 1px solid #000;
      top: 3px;
      border-radius: 2px;
    }
  }
}
</style>
